iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 8
0
Modern Web

網頁程式設計so easy系列 第 8

Day7 [CSS介紹-2]

  • 分享至 

  • xImage
  •  

表格框線

當我們寫一個表格希望它有框線時,我們通常會這樣寫

<table border="1">
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
</table>

當寫了border="1"時會讓表格變成雙層框線
http://ithelp.ithome.com.tw/upload/images/20161208/20103385jJRRUVb6yi.png
這時可以以下面幾種屬性來改變樣式。
border-collapse:這個屬性預設為seperate,意思就是像上圖一樣,讓兩層框線分開。當希望讓兩框線變成一層時可以這樣寫→ border-collapse:collapse;
http://ithelp.ithome.com.tw/upload/images/20161208/20103385Ehpaiv2yfo.png

border-style:可改變框線的style。可改變的值有

  • none(預設)
  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset

以下為各個值呈現出來的結果
http://ithelp.ithome.com.tw/upload/images/20161208/20103385Yzw7svVO4C.png

border-color:在td時,可指定框線顏色,如遇到只需要上框線需要上色可使用border-top-color指定顏色。如果想要一次上四種顏色,border-color:上 右 下 左,可依照這個順序上色。也可以寫三個屬性值,此時值為border-color:上 垂直 下;也可以寫兩個屬性值,此時為border-color:水平(上下) 垂直(左右)
border-width:在td時,可指定框線寬度。和border-color一樣可以分開設定。
border-spacing
border-radius:可畫出圓角框線。設四個屬性值時順序為左上、右上、右下、左下。例:設定為border-radius: 10px 20px 30px 40px;則圖為:http://ithelp.ithome.com.tw/upload/images/20161208/20103385wazHhMERGp.png

border綜合:框線粗細、顏色、樣式等屬性值順序可隨意排列,且不一定要全部指定。也可以四周各自指定。
例:

border: 10px red ridge;
border-left:solid yellow 10px;

範例

清單樣式

list-style-type:設定項目符號樣式。
無序清單樣式可設之值:

  • disc:實心原點
  • circle:空心圓點
  • square:實心方塊
  • none:不顯示項目符號
    圖示:
    http://ithelp.ithome.com.tw/upload/images/20161208/20103385ZyXlAoqChK.png

範例

有序清單樣式可設之值:
(可參考之前在html章節介紹的type,可以有多種樣式)
有序清單可透過html使用type屬性來設定樣式,也可使用css(html的style屬性來設樣式。)
html:

<ol type="1">
  <li>1</li>
  <li>2</li>
</ol>

http://ithelp.ithome.com.tw/upload/images/20161208/20103385W3eKOWZ9QN.png
css:

<ol style="list-style-type: cjk-ideographic">
  <li>1</li>
  <li>2</li>
</ol>

http://ithelp.ithome.com.tw/upload/images/20161208/20103385IS76s2vZ4E.png
可設之值請參考W3schools官方文件

範例

list-style-image:設定項目符號圖案。例:list-style-image: url("XXX.gif");
list-style-position:設定項目符號位置。
可設之值:

  • outside(預設):表示項目符號放在項目li之外。
  • inside:表示項目符號放在項目li之內。
    http://ithelp.ithome.com.tw/upload/images/20161208/20103385nRzkvhihVH.png

範例

list-style綜合:例→ list-style: disc inside;

BOX模型

在網頁文件中,每個元素都是被矩形包起來的。
以上面list-style-type範例為例,將CSS加上:

*{
 border: solid blue 1px; 
}

將每個元素都加上藍色、1px的框線。
結果如下:
http://ithelp.ithome.com.tw/upload/images/20161208/20103385PbCLY1Lzgv.png
margin:邊界
border:框線
padding:內距。元素內容與框線間留白的部分。如果元素有設置背景,則padding區域也會有背景。
content area:元素內容。

  • 上下區塊元素 block的margin會以大的優先,此稱為margin collapse

區塊元素是由上而下依序排列(ex: div, form, h1~h6, header, hr, nav, ol, p, table, ul, body, ...),行內元素則會由左而右排列(span)

http://ithelp.ithome.com.tw/upload/images/20161208/20103385qGx8C9ztNo.png
(此圖兩個區塊元素的padding, border, padding皆設為10px)
圖中兩個粉紅框框代表兩個區塊元素的border,兩個區塊元素的margin皆設為10px,但由圖可以看出上面區塊元素與下面區塊元素的間距不是10px,就是margin collapse的緣故,所以上面區塊元素與下面區塊元素的間距會被設為10px。

區塊元素左右不會出現margin collapse的問題。

  • 關於行內元素 inlinemargin collapse
    行內元素的border、padding與上下行、前後內容會重疊。
    範例

  • 關於行內區塊元素 inline-blockmargin collapse(ex: img元素)
    它與其他inline或inline-block元素在一起時,會呈現左右並列的效果。即使排列在行內,但它預設會像區塊元素一樣有一定的寬高。不像行內元素會與週邊元素重疊。
    範例

  • width、height會成content的width、height。
    html:

<body>
    <h1></h1>
    <p></p>
</body>

css:

body {
  width: 100px;
  height: 110px;
}

* {
  margin: 10px;
  border: solid pink 10px;
  padding: 10px;
  background-color: BlanchedAlmond;
}

結果:
http://ithelp.ithome.com.tw/upload/images/20161208/20103385dlWKJwR37a.png
藍色顯示區域為body區域。

開發者工具:
http://ithelp.ithome.com.tw/upload/images/20161208/20103385UCK7P0EUp0.png
可以看得出來,我當初在body設的height為110px=h1 margin 10px * 2+ h1 border 10px * 2+ h1 padding 10px * 2+ p margin 10px * 2+ p border 10px * 2+ p padding 10px * 2- 10px(margin collapse)
由此可知,我們設的height是不包含body的padding、border、margin的。這是在設計網頁時要很注意的地方。常見的方式就是在CSS多加上以下程式碼:

* {
  box-sizing: border-box; (預設:box-sizing: content-box;)
}

這樣我們所設的width就包含content+ padding+ border了!如果margin對於計算px也有問題時,可以再多設一層元素來控制長度、寬度。

元素定位

float:當元素下了float後,它會離開原本的排序。ex: float: left;,則元素就會往左"飄"。反之,如值為right,則元素會往右飄。
clear:clear: left;若左邊出現float區塊,則將本區塊向下移,直到左邊沒有區塊為止。right為相同道理。如果為clear: both;左右任一邊出現float區塊則將本區塊向下移,直到兩邊都沒有float區塊為止。
範例
position:除了可以使用float來調整區塊排序外,也可使用position屬性來指定區塊位置。可設定的屬性值為

  • static:採預設的排版方式
  • relative:先依預設方式將區塊排好位置後,再依top, right, bottom, left屬性將區塊移至相對於原位置的新位置。
  • absolute:用最接近的非static定位之上層元素再依top, right, bottom, left來決定位置。如上層元素都是static定位,則用瀏覽器視窗來決定位置。
  • fixed:以top, right, bottom, left來決定其在畫面上的位置,即使捲動頁面也不會影響此fixed區塊。

範例

進階範例


上一篇
Day6 [CSS介紹-1]
下一篇
Day8 [JavaScript-1]
系列文
網頁程式設計so easy30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言